<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>记忆卡片</ion-list-header>
          <ion-note>iFlashcard</ion-note>

          <ion-menu-toggle
            auto-hide="false"
            *ngFor="let p of appPages; let i = index"
          >
            <ion-item
              (click)="selectedIndex = i"
              routerDirection="root"
              [routerLink]="[p.url]"
              lines="none"
              detail="false"
              [class.selected]="selectedIndex == i"
            >
              <ion-icon
                slot="start"
                [ios]="p.icon + '-outline'"
                [md]="p.icon + '-sharp'"
              ></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

        <ion-list id="others-list" class="pointer">
          <ion-menu-toggle auto-hide="false">
            <ion-item (click)="share()" lines="none">
              <ion-icon
                slot="start"
                [ios]="'share-social-outline'"
                [md]="'share-social-sharp'"
              ></ion-icon>
              <ion-label>分享</ion-label>
            </ion-item>
          </ion-menu-toggle>

          <ion-menu-toggle
            auto-hide="false"
            *ngFor="let p of others; let i = index"
          >
            <ion-item
              (click)="selectedIndex = i + appPages.length"
              routerDirection="root"
              [routerLink]="[p.url]"
              lines="none"
              detail="false"
              [class.selected]="selectedIndex == i + appPages.length"
            >
              <ion-icon
                slot="start"
                [ios]="p.icon + '-outline'"
                [md]="p.icon + '-sharp'"
              ></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

        <ion-list id="logout-list" class="pointer">
          <ion-menu-toggle auto-hide="false">
            <ion-item (click)="logout()" lines="none">
              <ion-icon
                slot="start"
                ios="log-out-outline"
                md="log-out-sharp"
              ></ion-icon>
              <ion-label>退出</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>
